<template>
    <div class="app-container">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
      >
        <el-form-item label="浏览时间">
          <el-date-picker
            v-model="dateRange"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="客户名称" prop="noticeTitle">
          <el-input
            v-model="queryParams.data.name"
            placeholder="请输入客户名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item> -->
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
  
      <!-- <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            >新增</el-button
          >
        </el-col>
      </el-row> -->
  
      <el-table
        v-loading="loading"
        :data="noticeList"
      >
        <el-table-column
          label="ID"
          align="center"
          prop="componentInfoConfListId"
          width="100"
        />
        <el-table-column label="客户名称" align="center" prop="name" width="100">
        </el-table-column>
        <el-table-column
          label="联系电话"
          align="center"
          prop="tel"
          width="100"
        >
        </el-table-column>
       
        <el-table-column
          label="最近浏览时间"
          align="center"
          prop="createTime"
          width="100"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d}") }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="共计浏览次数"
          align="center"
          prop="number"
          width="100"
        />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
               @click="handleCopy(scope.$index, scope.row)"
              >复制手机号码</el-button
            >
            <!-- <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              >删除</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
  
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.current"
        :limit.sync="queryParams.size"
        @pagination="getList"
      />
  
      <!-- 添加或修改公告对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="780px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="客户logo" prop="backgroundUrl">
            <upload-view
              v-model="form.backgroundUrl"
              @img="getimgListback"
            ></upload-view>
          </el-form-item>
          <el-form-item label="客户名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入公告标题" />
          </el-form-item>
          <el-form-item label="客户介绍">
            <el-input v-model="form.description" placeholder="请输入公告标题" />
          </el-form-item>
          <el-form-item label="详细介绍">
            <editor v-model="form.particulars" :min-height="192" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import uploadView from "../../components/ImageUpload";
  import {
    componentlist,
    getNotice,
    delNotice,
    addproduct,
    updateNotice,
    updataProduct,
    delNoticeupdata,
    recordList
  } from "@/api/system/notice";
  
  export default {
    name: "Notice",
    dicts: ["sys_notice_status", "sys_notice_type"],
    data() {
      return {
          dateRange:[],
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 公告表格数据
        noticeList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          current: 1,
          size: 10,
          data: {
            startTime: "",
            endTime: "",
            name: "",
            type: 3,
          },
        },
        // 表单参数
        form: {
          type: "3",
          name: "",
          description: "",
          particulars: "",
          backgroundUrl: "",
        },
        copyData:null,
        // 表单校验
        rules: {
          backgroundUrl: [
            {
              required: true,
              message: "产品封面不能为空",
              trigger: "change,blur",
            },
          ],
          name: [
            { required: true, message: "产品标题不能为空", trigger: "blur" },
          ],
        },
      };
    },
    created() {
      this.getList();
    },
    components: {
      uploadView,
    },
    methods: {
        // 复制手机号
        handleCopy(row){
            this.copyData = row.name
            this.copy(this.copyData)
        },
        copy(data){
        let url = data;
        let oInput = document.createElement('input');
        oInput.value = url;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象;
        console.log(oInput.value)
        document.execCommand("Copy"); // 执行浏览器复制命令
        this.$message({
          message: '复制成功',
          type: 'success'
        });
        oInput.remove()
      },
      getimgListback(data) {
        console.log("图片路径back", data);
      },
      /** 查询公告列表 */
      getList() {
        this.loading = true;
        this.queryParams.data.startTime = this.dateRange[0]
        this.queryParams.data.endTime = this.dateRange[1]
        recordList(this.queryParams, this.queryParams.data).then(
          (response) => {
            this.noticeList = response.data;
            this.total = response.data.total;
            this.loading = false;
          }
        );
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          noticeId: undefined,
          noticeTitle: undefined,
          noticeType: undefined,
          noticeContent: undefined,
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.current = 1;
        
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
          this.dateRange=[]
         this.queryParams.data.name = ''
        this.resetForm("queryForm");
        this.handleQuery();
         
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加产品";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const noticeId = row.componentInfoConfListId;
        addproduct(noticeId).then((response) => {
          this.form = response.data;
          this.open = true;
          this.title = "修改客户";
        });
      },
      /** 提交按钮 */
      submitForm: function () {
            if (this.form.componentInfoConfListId) {
              updataProduct(this.form).then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.form = {}
                this.getList();
              });
            } else {
              console.log(this.form);
              this.form.type = "3";
              updataProduct(this.form).then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.form = {}
                this.getList();
              });
            }
      },
     /** 删除按钮操作 */
     handleDelete(row) {
        const noticeIds = row.componentInfoConfListId || this.ids;
        this.$modal
          .confirm('是否确认删除编号为"' + noticeIds + '"的数据项？')
          .then(function () {
            return delNoticeupdata(noticeIds);
          })
          .then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      },
    },
  };
  </script>
  